<template>
  <div>
    <el-button type="primary" @click="showDialog">新增品牌</el-button>
    <el-table 
      :data="brandList"
      border
      style="width: 100%;margin:10px 0;" class="form1">
      <el-table-column
        type="index"
        label="id" align="center" width="80">
      </el-table-column>

      <el-table-column
        prop="name"
        label="品牌名称"
        >
      </el-table-column>

      <el-table-column label="品牌LOGO">
        <template slot-scope="{row}">
          <img :src="row.list_pic_url" alt="" style="width:100px; height:60px; ">
        </template>

      </el-table-column>
      
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="primary" @click="edit(row)">修改</el-button>
          <el-button type="danger" @click="brand_remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
   <el-pagination 
      @size-change="handleSizeChange"
      @current-change="getBrandList"
      :current-page="pageNum"
      :page-sizes="[5,10,25,50]"
      :page-size="pageSize"
      layout=" prev, pager, next, jumper, -> , sizes, total"
      :pager-count="pagerCount"
      :total="total"
      align="center"
      >
    </el-pagination>

    <!-- dialog -->
      <el-dialog :title="DialogTitle" :visible.sync="dialogFormVisible"  >
      <el-form :model="brand" >
        <el-form-item label="品牌名称 " label-width="100" >
          <el-input v-model="brand.name" autocomplete="off" style="width:50%"></el-input>
        </el-form-item>

        <el-form-item label="品牌LOGO" > 
          <el-upload name="imgfile"
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="brand.list_pic_url" :src="brand.list_pic_url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="brandHandle">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name:'Brand',
  data(){
    return{
      pageNum:1,
      pageSize:5,
      brandList:[],
      total:0,
      pagerCount:5,
      // dialog
      dialogFormVisible:false,
      url:'/dev-api/upload',
      brand:{
        name:'',
        list_pic_url:''
      },
      DialogTitle:'新增品牌'


    }
  },
  mounted(){
    this.getBrandList()
  },
  methods:{
   async getBrandList(pageNum=1){
      this.pageNum = pageNum
      let result= await this.$api.product.getBrand(this.pageNum,this.pageSize)
      this.brandList = result.data.brand
      this.total = result.data.total
    },
    // 点击修改页面
    async handleSizeChange(val) {
      this.pageSize = val
      let result= await this.$api.product.getBrand(this.pageNum,this.pageSize)
      this.brandList = result.data.brand
      this.total = result.data.total
      },

      // upload组件
      handleAvatarSuccess(res, file) {
        this.brand.list_pic_url = res.data;

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      // 显示Dialog框
      showDialog(){
       
        this.DialogTitle='新增品牌'
        this.dialogFormVisible = true
        this.brand={
            name:'',
            list_pic_url:''
        }
      },

      // 修改属性
      edit(row){
        this.dialogFormVisible = true
        this.DialogTitle='修改品牌'
        this.brand = {...row}
        this.brand.name = row.name
        this.brand.list_pic_url = row.list_pic_url
        
      },

      // 提交事件,新增与更新共用同一方法
     async brandHandle(){
        let {pageNum,pageSize} = this.$data
        let id = this.brand.id
        let params = {
            pageNum,
            pageSize,
            ...this.brand
          }
        try{
          
          let result = await this.$api.product.reqBrandEdit(params)
          
          if(result.status != 200){
            this.$message.error('更新数据失败')
            return
          }
          this.$message.success('修改成功')
          this.getBrandList(id?pageNum:1)
        }catch{
          this.$message({
            type:'warning',
            message:'修改失败'
          })
        }

        //每次修改后会停留在修改的当前商品所在页,如果是第一行则请求前一页
        this.dialogFormVisible = false
      },
      //  删除品牌
         brand_remove(row){
          this.$confirm(`此操作将永久删除 ${row.name } , 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
            }).then(async () => {
              try{
                    let result = await this.$api.product.reqBrandDel(row.id)
                    if(result.status === 200){
                      this.$message.success('删除成功')
                      this.getBrandList(this.brandList.length <= 1?this.pageNum -1:this.pageNum)
                    }

                  }catch{
                    this.$message({
                        type:'warning',
                        message:'删除失败'
                      })
                  }

            }).catch(() => {
              this.$message({
                type: 'info',
                message: ` ${row.name } 已取消删除`
              })          
            })

         }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>